<script setup lang="ts">
import { reactive } from 'vue';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';

const props = defineProps<{
  placeholder: string;
  /**
   * 显示之前选过的值
   */
  selectedValue?: string;
}>();

const emits = defineEmits<{
  (
    e: 'onChange',
    assetTypeId?: string,
    assetTypeName?: string,
    assetId?: string,
    assetName?: string,
  ): void;
}>();

//局部
const state: {
  appAssetListPopupIsShow: boolean;
  selectedValue?: string;
} = reactive({
  appAssetListPopupIsShow: false,
  selectedValue: '',
});
//显示之前选过的值
if (props.selectedValue) {
  state.selectedValue = props.selectedValue;
}
</script>
<template>
  <view
    v-bind="$attrs"
    class="asset-list-picker"
    @click="state.appAssetListPopupIsShow = !state.appAssetListPopupIsShow"
  >
    <text>{{ state.selectedValue || props.placeholder }}</text>
    <app-nut-icon-right />
  </view>
  <app-asset-list-popup
    v-model="state.appAssetListPopupIsShow"
    title="资产类型"
    @on-selected="(assetItem: AssetInfo.Dto) => {
        emits('onChange',assetItem.assetTypeId, assetItem.assetTypeName, assetItem.id,  assetItem.assetName);
        state.selectedValue = assetItem.assetName;
        state.appAssetListPopupIsShow = !state.appAssetListPopupIsShow;
      }"
  />
</template>
<style lang="scss">
.asset-list-picker {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
